<template>
  <div>
    <div class="top">
      <img src="@/assets/img/logo.png" alt="logo" class="logo" />
    </div>
    <div class="menu-list">
      <a-menu v-model:selectedKeys="menuState.selectedKeys" style="width: 256px" mode="inline"
      :open-keys="menuState.openKeys" :items="menuItems" @click="onMenuSelect"></a-menu>
    </div>
  </div>
</template>
<script setup>
import { ref, h, reactive } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';

function getMenuItemFormat(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

// 此页面导航菜单数据不能用缓存，因为缓存后的数据，显示时左侧菜单没有图标
let menuItems = reactive([]);  // 菜单列表（已处理好格式）
let rootMenuKeys = reactive([]);  // 所有根菜单key
let selMenuKeys = reactive([]); // 选中的菜单
let selSubMenuKeys = reactive([]);  // 选中的子菜单


// 如果缓存里有数据，就不用处理了
const selMenuKeysLocal = window.localStorage.getItem('vue3-vite5-admin-menu-selected-key');
const selSubMenuKeysLocal = window.localStorage.getItem('vue3-vite5-admin-menu-selected-sub-key');
if (selMenuKeysLocal !== null && selSubMenuKeysLocal !== null) {
  selMenuKeys = JSON.parse(selMenuKeysLocal);
  selSubMenuKeys = JSON.parse(selSubMenuKeysLocal);
}

// const menuItemsLocal = window.localStorage.getItem('vue3-vite5-admin-menu-items');
// const rootMenuKeysLocal = window.localStorage.getItem('vue3-vite5-admin-menu-root-key');
// 登录接口返回的路由数据
const local_server_route = ref([]);
local_server_route.value = JSON.parse(window.localStorage.getItem('vue3-vite5-admin-menu')); //登录接口返回的菜单数据
// 菜单图标（此处的key是和数据库表icon字段对应）
const iconToImg = reactive({ 'donation': h(MailOutlined), 'user': h(SettingOutlined), 'policy_agreement': h(AppstoreOutlined), 'admin': h(SettingOutlined) });

// 菜单数据处理
local_server_route.value.map((_route) => {
  rootMenuKeys.push(_route.key);
  let _childrenList = [];
  let children = _route.sub;
  if (Array.isArray(children) && children?.length > 0) {
    if (selMenuKeys.length === 0) {
      selMenuKeys.push(_route.key);
    }

    children.map((childRoute) => {
      if (selSubMenuKeys.length === 0) {
        selSubMenuKeys.push(_route.key + '_' + childRoute.key);
      }
      _childrenList.push(getMenuItemFormat(h('a', { href: '/admin/' + childRoute.url }, childRoute.name), _route.key + '_' + childRoute.key));
    })
  }
  menuItems.push(getMenuItemFormat(_route.name, _route.key, () => iconToImg[_route.icon], _childrenList));
})

// 菜单状态
const menuState = reactive({
  rootMenuKeys: rootMenuKeys,
  openKeys: selMenuKeys,
  selectedKeys: selSubMenuKeys,
});

// 点击菜单
const onMenuSelect = ({ item, key, keyPath }) => {
  localStorage.setItem("vue3-vite5-admin-menu-selected-key", JSON.stringify([keyPath[0]]));  //选中的菜单
  localStorage.setItem("vue3-vite5-admin-menu-selected-sub-key", JSON.stringify([keyPath[1]]));  //选中的子菜单
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
}
.top > .logo{
  max-height: 40px;
}
.ant-menu-inline {
  border-inline-end: none !important;
}
</style>